<template>
  <div class="hydrograph">
    <div class="header">
      <BasicForm @register="register" @submit="getStationData" style="width: 100%" />
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 图表 -->
      <TableChart
        :chartOption="state.chartOption"
        :isShowSlot="false"
        :isShowTable="state.isShowTable"
        :isShowTipIndex="state.isShowTipIndex"
      >
        <!-- <ul class="minMaxList">
          <li v-for="(item, index) in minMaxList" :key="index">
            <span>{{ item.title }}：</span>
            <span>{{ state.stationData?.[item.key] !== "" ? state.stationData?.[item.key] : "-(-)" }}</span>
            <span>{{ state.stationData?.[`${item.key}Tm`] ? state.stationData?.[`${item.key}Tm`].slice(0, 16) : "" }}</span>
          </li>
        </ul> -->
      </TableChart>
      <!-- 侧边栏内容区域 -->
      <div class="basicInfoTableList" :class="{ isShowTable: !state.isShowTable }">
        <TableList
          :tableDataSource="state.tableDataSource"
          :tableColumns="state.tableColumns"
          @cellClick="cellClick"
          rowKey="tmMin"
        />
        <!-- 显示隐藏侧边栏内容区域 -->
        <div
          class="showTableBtn"
          :class="{ isRotate: !state.isShowTable }"
          @click="state.isShowTable = !state.isShowTable"
        >
          <Icon icon="tabler:caret-left-filled" size="20" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch, inject, onMounted } from "vue";
import dayjs from "dayjs";
import TableChart from "@/components/TableChart";
import TableList from "@/components/TableList";
import setChartOption from "./hydrographChartOption";
import { Icon } from "@gui-pkg/components";
import { BasicForm, FormSchema, useForm } from "@gui-pkg/antdcomponents";
import { getChartStep } from "@/api/realTime/realData";

defineOptions({ name: "Hydrograph" });

const defaultTime = [dayjs().subtract(7, "day"), dayjs()];
const schemas: FormSchema[] = [
  {
    field: "time",
    component: "RangePicker",
    defaultValue: defaultTime,
    label: "起止时间",
    colProps: { span: 8 },
    componentProps: {
      ranges: {
        '最近一天': [dayjs().subtract(1, "day"), dayjs()],
        '最近三天': [dayjs().subtract(3, "day"), dayjs()],
        '最近一周': [dayjs().subtract(7, "day"), dayjs()],
      },
    }
  },
  {
    field: "step",
    component: "Select",
    label: "步长",
    colProps: { span: 8 },
    defaultValue: "h-1",
    componentProps: {
      options: [
        { label: "10分钟", value: "m-10" },
        { label: "30分钟", value: "m-30" },
        { label: "1小时", value: "h-1" },
        { label: "3小时", value: "h-3" },
        { label: "6小时", value: "h-6" },
        { label: "12小时", value: "h-12" },
        { label: "1天", value: "d-1" },
        { label: "3天", value: "d-3" },
      ],
    },
  },
];

const [register, { getFieldsValue }] = useForm({
  labelWidth: 80,
  schemas,
  actionColOptions: { span: 6 },
});

const state = reactive({
  isShowTable: true,
  chartOption: null,
  stationData: null,
  isShowTipIndex: -1,
  tableDataSource: [],
  tableColumns: [
    { dataIndex: "tmMin", title: "监测时间", align: "center" },
    { dataIndex: "q", title: "流量(m³/s)", align: "center" },
    { dataIndex: "qvelocity", title: "流速", align: "center" },
    { dataIndex: "qreverseCumulative", title: "反向累计流量", align: "center" },
    { dataIndex: "qforwardCumulative", title: "正向累计流量", align: "center" },
  ],
});

const minMaxList = [
  { key: "maxZ", title: "最高站上水位(m)" },
  { key: "minZ", title: "最低站上水位(m)" },
];

const props = defineProps({
  data: { type: Object },
});

const cellClick = ({ params, index }) => {
  state.isShowTipIndex = index;
};

// 后台获取站点数据
const getStationData = async (data = null) => {
  if (props?.data?.stcd) {
    const params = {
      stcd: props?.data?.stcd,
      startTime: data?.time && data.time.length ? data.time[0] : "",
      endTime: data?.time && data.time.length ? data.time[1] : "",
    };
    if (data?.step) {
      let arr = data.step.split("-");
      params[arr[0]] = arr[1];
    }
    const stationData = await getChartStep("pump", params);
    state.stationData = stationData;
    state.tableDataSource = [...stationData.list].reverse();
    state.chartOption = setChartOption(props.data, stationData.list);
  }
};

// 初始化数据
const initData = async () => {
  const values = await getFieldsValue();
  if (!values.time) {
    values.time = [
      defaultTime[0].format("YYYY-MM-DD HH:mm:ss"),
      defaultTime[1].format("YYYY-MM-DD HH:mm:ss"),
    ];
    values.step = "h-1";
  }
  await getStationData(values);
};

// 监听是否点击了全屏，重新渲染下
const modalHeightChange = inject("ModalHeightChange");
watch(
  () => modalHeightChange.value,
  () => {
    initData();
  }
);

onMounted(() => {
  setTimeout(() => {
    initData();
  }, 50);
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.hydrograph {
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    ::v-deep(.ant-form-item) {
      margin-bottom: 0 !important;
    }
    .step {
      margin-left: 10px;
      margin-right: 30px;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    position: relative;
    .basicInfoTableList {
      width: 390px;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: absolute;
      right: 0;
      transition: all 0.5s;
    }
    .showTableBtn {
      position: absolute;
      top: 40%;
      left: -22px;
      z-index: 200;
      width: 24px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.5s;
      transform: translate(0px, -50%) rotate(180deg);
      background: url(@/assets/svg/sideBar.svg) no-repeat;
      span {
        margin-top: -20px;
        font-size: 18px;
        color: #c4c4c4;
        transform: rotate(0deg);
        transition: all 0.3s;
      }
      &:hover {
        span {
          color: #5780fa;
        }
      }
    }
    .isRotate {
      span {
        transform: rotate(180deg);
      }
    }
  }
  .isShowTable {
    right: -390px !important;
  }
  .minMaxList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0px 10px 0 40px;
    li {
      width: 50%;
      height: 20px;
      font-size: 12px;
      display: flex;
      align-items: center;
      span {
        padding: 0 10px;
      }
    }
  }
}
</style>
